import "./Home.css";
import { Badge, TabBar, Checkbox, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { UndoOutline } from "antd-mobile-icons";
import { getLocation } from "../../request/index";
import { useEffect, useState } from "react";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
function Home() {
  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: "/todo",
      title: "去旅行",
      icon: <UnorderedListOutline />,
      badge: "5",
    },
    {
      key: "/message",
      title: "里程商城",
      icon: <MessageFill />,
    },
    {
      key: "/TicketList",
      title: "订单",
      icon: <UserOutline />,
    },
    {
      key: "/center",
      title: "我的",
      icon: <MessageOutline />,
    },
  ];
  const navigate = useNavigate();
  const tz = (key: string) => {
    navigate(key);
  };
  const [gd, setGd] = useState<any[]>([]);
  useEffect(() => {
    getLocation().then((res) => {
        console.log(res);
      setGd(res.data.city);
    });
  }, []);
  const csxz = () =>{
    navigate("/CitySelect")
  }
  return (
    <div className="Home">
      <div className="Home-Header">
        <div className="Home-Header1">
          <div className="Home-Header11">
            <h2 onClick={csxz}>{gd}</h2>
          </div>
          <div className="Home-Header12">
            <UndoOutline />
          </div>
          <div className="Home-Header13">
            <h2 onClick={csxz}>南京车站</h2>
          </div>
        </div>
        <div className="Home-Header2">
          <h2>11月29日</h2>
          <h4>明天出发</h4>
        </div>
        <div className="Home-Header3">
          <h3>
            高铁/动车
            <Checkbox />
          </h3>
          <h3>
            学生票
            <Checkbox />
          </h3>
        </div>
        <div className="Home-Header4">
          <Button onClick={()=>navigate("/TicketList")}>火车票查询</Button>
        </div>
      </div>
      {/* Tabbar */}
      <TabBar className="Home-Tabbar">
        {tabs.map((item) => (
          <TabBar.Item
            onClick={() => tz(item.key)}
            key={item.key}
            icon={item.icon}
            title={item.title}
          />
        ))}
      </TabBar>
    </div>
  );
}

export default Home;
